<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>最家</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/myorder.css"/>
    <link rel="stylesheet" type="text/css" href="css/comment.css">
</head>
<body ><!------------------------------head------------------------------>
<div class="head ding">
    <div  th:replace="common :: head" ></div>

</div>
<div class="address mt">
    <div class="wrapper clearfix"><a href="index.html" class="fl">首页</a><span>/</span><a href="mygxin.html" class="on">个人中心</a><span>/</span><a
            href="myprod.html" class="on">待评价商品</a></div>
</div><!------------------------------Bott------------------------------>

<div class="Bott" id="myprod">
    <div class="wrapper clearfix">
        <div th:replace="common :: zuoFl"></div>
        <div class="you fl">
            <div class="my clearfix"><h2 class="fl">商品评价</h2></div>
            <div class="dlist">
                <ul class="clearfix" id="pro">
                    <li class="on"><a href="javascript:void(0)">待评价商品</a></li>
                    <li><a href="javascript:void(0)">已评价商品</a></li>
                </ul>
            </div>
                <div class="sx clearfix" >
                        <div class="clearfix" id="myorderq2">
                            <dl class="fl" th:each="cart:${carts}" th:if="${cart.isComment==false && cart.isReceiving}">
                                <dt><a th:href="@{'/prodetail?id='+${cart.goods.id}}"><img width="200" height="200" th:src="${cart.goods.image}"/></a></dt>
                                <dd><a th:href="@{'/prodetail?id='+${cart.goods.id}}" th:text="${cart.goods.title.substring(0,20)}"></a></dd>
                                <dd th:text="${'¥'+(cart.goods.price*cart.orderNumber)}"></dd>
                                <dd><a href="javascript:void(0)" onclick="a(this.id)" th:id="${cart.goods.id+','+cart.id}">评价</a></dd>
                            </dl>
                        </div>
                        <div class="clearfix" id="myorderq" >
                            <dl class="fl" th:each="cart:${carts}" th:if="${cart.isReceiving && cart.isComment}">
                                <dt><a th:href="@{'/prodetail?id='+${cart.goods.id}}"><img width="200" height="200"  th:src="${cart.goods.image}"/></a></dt>
                                <dd><a th:href="@{'/prodetail?id='+${cart.goods.id}}" th:text="${cart.goods.title.substring(0,20)}"></a></dd>
                                <dd th:text="${'¥'+(cart.goods.price*cart.orderNumber)}"></dd>
                                <dd><a href="javascript:void(0)" onclick="b(this.id)" th:id="${cart.goods.id}" >查看评价</a></dd>
                            </dl>
                        </div>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="mask"></div><!--评价弹框-->
<div class="pj">
    <h3>商品评价</h3>
    <form onsubmit="return false">

        <textarea name="info" id="info" rows="" style="width:380px;height: 60px "  cols="" placeholder="评论信息" required></textarea>
        <button type="button" id="uploadBut" class="bottom" style="width: 200px;height: 30px;margin-top: 20px"
                onclick="upload()">上传图片,上传一张或者多张
        </button>
        <input type="text" name="image" id="image" style=" display: none;"/>

        <div class="picDiv" >
            <div class="addImages">

                <input type="file" class="file" id="uploadFilexxx" multiple="multiple"
                       accept="image/png, image/jpeg, image/gif, image/jpg">
                <div class="text-detail" onclick="upload()">
                    <span>+</span>
                    <p>点击上传</p>
                </div>
            </div>
        </div>
        <div class="bc"><input type="submit" value="保存" onclick="commentSum()"/><input type="button" value="取消"/></div>

    </form>

</div><!--查看评价-->
<div class="chak" id="sjrh" >
        <h3>商品评价</h3>
        <p  style="color: red;margin-top: 10px"  >挺好的挺好的挺好的~五分好评</p>
        <p  style="margin-top: 10px">评价图片：</p>
        <p >
            <img width="50" height="50">
        </p>
        <div class="bc"><input type="button" style="color: red;font-size: 20px;margin-left: 260px" value="关闭"/></div>
</div><!--返回顶部-->
<div th:replace="common :: gotop"></div>

<div  th:replace="common :: footer"></div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
<script>
    var gid = 0;
    var id = 0;
    function a(text) {
        var strings = text.split(",");
        gid =  strings[0]
        id = strings[1]
    }

    function colse() {
        $(".mask").hide()
        $(".chak").hide()
    }

    function b(gid) {
        $.get("comment/myprodByGid?gid="+gid,function (result) {
            var text ='<h3>商品评价</h3>\n' +
                '        <p  style="color: red;margin-top: 10px"  >评价内容：'+result.info+'</p>\n' +
                '        <p  style="margin-top: 10px">评价图片：</p>\n' +
                '        <p >'
            for (var i = 0; i <result.image.length ; i++) {
                text+='<img src="'+result.image[i]+'" width="100" height="100">'
            }

            text+='</p><div class="bc"><input type="button" style="color: red;font-size: 20px;margin-left: 260px" onclick="colse()" value="关闭"/></div>'
            $("#sjrh").html(text)
            $(".mask").show()
            $(".chak").show()
        })



    }

    function upload() {
        document.getElementById("uploadFilexxx").click();
        $(".picDiv").show()
    }
    //图片上传预览功能
    var userAgent = navigator.userAgent; //用于判断浏览器类型
    //使用formData完成多图片上传
    var formData = new FormData();
    var formData2 = new FormData();
    $(".file").change(function () {
        //获取选择图片的对象
        var docObj = $(this)[0];
        var picDiv = $(this).parents(".picDiv");
        //得到所有的图片文件
        var fileList = docObj.files;
        //将图片数据放到formData中传递后台
        if ($(this)[0].files.length == 1) {
            formData.append("file", docObj.files[0]);
            formData2.append("file", docObj.files[0]);
        } else {
            for (var i = 0; i < $(this)[0].files.length; i++) {
                formData.append("file", $(this)[0].files[i]);
                formData2.append("file", $(this)[0].files[i]);
            }
        }
        //循环遍历
        for (var i = 0; i < fileList.length; i++) {
            //动态添加html元素
            var picHtml = "<div class='imageDiv' nm='" + fileList[i].name + "'> <img id='img" + fileList[i].name + "'/> <div class='cover'><i class='delbtn'>删除</i></div></div>";
            console.log(picHtml);
            picDiv.prepend(picHtml);
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img" + fileList[i].name);
            if (fileList && fileList[i]) {
                //图片属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '160px';
                imgObjPreview.style.height = '130px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                if (userAgent.indexOf('MSIE') == -1) {
                    //IE以外浏览器
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                    console.log(imgObjPreview.src);
                    // var msgHtml = '<input type="file" id="fileInput" multiple/>';
                } else {
                    //IE浏览器
                    if (docObj.value.indexOf(",") != -1) {
                        var srcArr = docObj.value.split(",");
                        imgObjPreview.src = srcArr[i];
                    } else {
                        imgObjPreview.src = docObj.value;
                    }
                }
            }
        }
        /*删除功能*/
        $(".delbtn").click(function () {
            if (formData.getAll("file").length == 0) {
                formData = formData2;
            } else {
                formData2.delete("file");
                for (var i = 0; i < formData.getAll("file").length; i++) {
                    if (formData.getAll("file")[i].name == $(this).parents(".imageDiv").attr("nm")) {

                    } else {
                        formData2.append("file", formData.getAll("file")[i]);
                    }
                }
            }
            formData.delete("file");
            for (var i = 0; i < formData2.getAll("file").length; i++) {
                formData.append("file", formData2.getAll("file")[i]);
            }
            var _this = $(this);
            _this.parents(".imageDiv").remove();
        });
    });

    function commentSum() {
        var pid = 0
        if ($("#info").val().length > 0) {
            if (formData2.getAll("file").length > 0) {
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    data: formData2,
                    cache: false, //上传文件不需要缓存
                    url: '/upload',
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (data) {
                        if (data.success == 'ok') {
                            $("#image").val(data.imags)
                            var info = $("#info").val()
                            var images = $("#image").val();
                            $.ajax({
                                type: 'post',
                                data: {info, images, gid, pid},
                                url: 'comment/save',
                                success: function (data) {
                                    var isComment = true
                                    $.post('cart/upd',{id,isComment},function (result) {
                                        if(result=='ok'){
                                            $("#myorderq").load(location.href + " #myorderq")
                                            $("#myorderq2").load(location.href + " #myorderq2")
                                        }
                                    })
                                }
                            })
                        }
                    }
                })
            }
        }


    }
</script>
</body>
</html>